<script setup lang='ts'>
  import { reactive, ref } from 'vue';
  import xmdialog from '@/components/xmdialog.vue';
  import exchange from './exchange.vue';
  import request from '@/api/index';
  import confirm from './confirm.vue';
  import { xmloading, xmtoast } from '@/utils/public';
  import { jd_balance, diamond_balance, useUserStore } from '@/pinia/getter';
  const exchangeRef = ref();
  const confirmRef = ref();
  const action = reactive({
    show:false,
    tabType:1,
    tips:'在金豆商店中购买道具，将等价赠送金豆',
    goodslist:[] as Array<any>
  })
  interface shopQuery {
    giftShopList:Array<object>,
    jdShopList:Array<object>
  }
  let shopObj:shopQuery = {
    giftShopList:[],
    jdShopList:[],
  }
  const tablist = [{
    type:1,
    text:'道具商店',
    tips:'在金豆商店中购买道具，将等价赠送金豆'
  },{
    type:2,
    text:'礼物商店',
    tips:'在金豆商店中兑换礼物，礼物的金豆价值与钻石相等'
  }]
  const handleNav = (item:any)=>{
    action.tabType = item.type
    action.tips = item.tips
    filterShopList()
  }
  const handlebuy = (item:any)=>{
    const type = filterButSet(item.price)
    if( type == 2) return xmtoast('金豆余额不足，请先兑换呦～')
    if( type == 3) {
      confirmRef.value.openDialog({
        showtype:type
      })
      return
    }
    exchangeRef.value.openDialog({
      ...item,
      timeText:filterTime(item.time_limit),
      type:action.tabType
    })
  }
  const filterTime = (time:number = 0)=>{
    if(!time) return 0
    let minute = time / 60
    if(minute > 60) return (minute / 60) + '小时'
    return minute + '分钟'
  }
  const filterButSet = (price=0)=>{
    if(action.tabType == 1) {
      if(diamond_balance.value < price) return 3
    }
    if(action.tabType == 2) {
      if(jd_balance.value < price) return 2
    }
    return 1
  }
  const filterShopList = ()=>{
    if(action.tabType == 1) {
      action.goodslist = shopObj.jdShopList
    }
    if(action.tabType == 2) {
      action.goodslist = shopObj.giftShopList
    }
  }
  const getList = async()=>{
    const loading = xmloading()
    const res = await request.getShopList()
    const { giftShopList, jdShopList } = res.data
    let list = jdShopList.map((res:any)=>{
      let small_img = ''
      if(res.goods_id == 39) small_img = 'gift1.png'
      if(res.goods_id == 40) small_img = 'gift2.png'
      if(res.goods_id == 41) small_img = 'gift3.png'
      if(res.goods_id == 42) small_img = 'gift4.png'
      if(res.goods_id == 43) small_img = 'gift5.png'
      if(res.goods_id == 44) small_img = 'gift6.png'
      res.small_img = `shopImage/${small_img}`
      return res
    })
    shopObj = {
      giftShopList,
      jdShopList:list
    }
    filterShopList()
    loading.close()
  }
  const openDialog = async()=> {
    await useUserStore.getWallet()
    await getList()
    action.show = true
  }
  defineExpose({
    openDialog
  })
</script>

<template>
  <div>
    <xmdialog class="shoplist" v-model:dialogshow="action.show">
      <div
        class="topbox flex-align-end">
        <div class="integral mr-8 flex-align">
          <xmimg src="shopImage/icon8.png" class="icon" />
          <div>{{ diamond_balance }}</div>
        </div>
        <div class="integral flex-align">
          <xmimg src="shopImage/icon9.png" class="icon" />
          <div>{{ jd_balance }}</div>
        </div>
      </div>
      <div class="navtab flex-align-center">
        <div
        v-for="item of tablist"
        :key="item.type"
        :class="item.type == action.tabType?'select':''"
        @click="handleNav(item)">
          {{ item.text }}
        </div>
      </div>
      <div class="tips">{{ action.tips }}</div>
      <div class="goodsList flex-start-wrap">
        <div class="goodsbox" v-for="(item,index) in action.goodslist" :key="index">
          <div @click="handlebuy(item)" class="goods flex-align-center">
            <xmimg :src="item.image || item.small_img" />
            <div v-if="action.tabType == 1" class="time">{{ filterTime(item.time_limit) }}</div>
          </div>
          <div class="purchase">
            <div class="moeny flex-align-center">
              <xmimg v-if="action.tabType == 1" src="shopImage/icon4.png" class="icon" />
              <xmimg v-if="action.tabType == 2" src="shopImage/icon5.png" class="icon" />
              {{ item.price }}
            </div>
            <div @click="handlebuy(item)" :class="['but',filterButSet(item.price) == 1?'':'gray']">
              {{ action.tabType == 1?'购买':'' }}
              {{ action.tabType == 2?'兑换':'' }}
            </div>
          </div>
        </div>
      </div>
    </xmdialog>
    <confirm ref="confirmRef" />
    <exchange ref="exchangeRef" />
  </div>
</template>

<style lang='scss' scoped>
  $height:40px;
  $width:316px;
  .shoplist {
    :deep(.dialog-popup) {
      padding: 10px 0 0;
      box-sizing: border-box;
    }
    :deep(.Functionality){
      position: relative;
      width: $width;
      height: 402px;
      border-radius: 8px;
      padding: 30px 0 0;
      box-sizing: border-box;
      background: var(--shopBackColor);
    }
    .topbox {
      position: absolute;
      top: -10px;
      width: $width;
      height: $height;
      padding: 10px 12px 0 0;
      box-sizing: border-box;
      background: var(--shopTitleImage);
      .mr-8 {
        margin-right: 8px;
      }
      .integral {
        min-width: 56px;
        height: 16px;
        border-radius: 8px;
        padding: 0 7px 0 2px;
        box-sizing: border-box;
        background: var(--shopIntegralBackColor);
        .icon {
          width: 16px;
          height: 16px;
          margin-right: 2px;
        }
        div {
          flex: 1;
          height: 16px;
          line-height: 17px;
          color: var(--shopIntegralFontColor);
          font-size: 10px;
          font-weight: 500;
          text-align: right;
        }
      }
    }
    .navtab {
      margin: 12px auto 0;
      border-radius: 100px;
      width: max-content;
      div {
        width: 88px;
        height: 26px;
        line-height: 26px;
        font-size: 12px;
        font-weight: 400;
        text-align: center;
        border-radius: 100px 0px 0px 100px;
        border: 1px solid var(--shopNavTabBorder);
        box-sizing: border-box;
      }
      div:nth-last-child(1) {
        border-radius: 0 100px 100px 0;
      }
      .select {
        color: var(--shopNavTabSelcetFontColor);
        font-weight: 500;
        background: var(--shopNavTabSelcetBackColor);
      }
    }
    .tips {
      color: var(--shopTipsFontColor);
      font-size: 10px;
      font-weight: 400;
      text-align: center;
      margin: 12px 0 16px;
    }
    .goodsList {
      padding: 0 4px 0 16px;
      .goodsbox {
        width: 84px;
        margin: 0 12px 24px 0;
        .goods {
          position: relative;
          width: 84px;
          height: 84px;
          border-radius: 4px;
          box-sizing: border-box;
          background: var(--shopGoodsBackColor);
          img {
            overflow: hidden;
            width: 100%;
            border-radius: 4px;
          }
          .time {
            position: absolute;
            right: -1px;
            bottom: -1px;
            width: 33px;
            height: 14px;
            line-height: 14px;
            color: var(--shopGoodsDayFontColor);
            font-size: 10px;
            font-weight: 500;
            text-align: center;
            background: var(--shopGoodsDayBackColor);
            border-radius: 4px 0 4px 0;
          }
        }
        .purchase {
          .moeny {
            width: 100%;
            height: 16px;
            color: var(--shopGoodsMoenyFontColor);
            font-size: 10px;
            font-weight: 500;
            margin: 2px 0;
            .icon {
              width: 16px;
              height: 16px;
              margin-right: 2px;
            }
          }
          .but {
            width: 100%;
            height: 20px;
            line-height: 20px;
            color: #fff;
            font-size: 12px;
            font-weight: 500;
            text-align: center;
            border-radius: 10px;
            background: var(--shopGoodsButBackColor);
          }
          .gray {
            opacity: .3;
          }
        }
      }
    }
  }

</style>